<template>
  <div class="product-box">
    <div class="product-intro">
      <div class="product-swiper">
        <el-carousel :interval="5000" arrow="always" height="560px">
          <el-carousel-item
            v-for="(item, index) in itemInfo[0].itemSwiperImgUrl"
            :key="index"
          >
            <img class="swiper-img" :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="product-con">
        <h2>{{ itemInfo[0].title }}</h2>
        <p class="seller-type">{{ itemInfo[0].sellerType }}</p>
        <div class="activity-box" v-if="itemInfo[0].havaActivity">
          <el-divider></el-divider>
          <p class="tag">{{ itemInfo[0].activityItem.tag }}</p>
          <span class="title">
            {{ itemInfo[0].activityItem.title }}
          </span>
          <el-divider></el-divider>
        </div>
        <p class="price">
          <span class="price-rmb">￥</span>
          <em class="now-price">{{ itemInfo[0].discountPrice }}</em>
          <sub class="dis">
            ￥<span class="old-price">{{ itemInfo[0].oldPrice }}</span>
          </sub>
        </p>
        <div class="buy-option">
          <div class="option">
            <div class="title">选择版本</div>
            <el-radio
              v-for="(item, index) in itemInfo[0].version"
              :key="index"
              v-model="option1"
              :label="item"
              border
              >{{ item }}</el-radio
            >
          </div>
          <div class="option">
            <div class="title">选择颜色</div>
            <el-radio
              v-for="(item, index) in itemInfo[0].color"
              :key="index"
              v-model="option2"
              :label="item"
              border
              >{{ item }}</el-radio
            >
          </div>
          <div class="option">
            <div class="title">选择套餐</div>
            <el-radio
              v-for="(item, index) in itemInfo[0].combo"
              :key="index"
              v-model="option3"
              :label="item"
              border
              >{{ item }}</el-radio
            >
          </div>
        </div>
        <div class="selected-list">
          <ul>
            <li>
              {{ userAllSelection
              }}<span>{{ itemInfo[0].discountPrice }}元</span>
            </li>
          </ul>
          <div class="total-price">总计: {{ itemInfo[0].discountPrice }}元</div>
        </div>
        <div class="btn-box">
          <div class="sale-btn">
            <el-button
              type="primary"
              icon="el-icon-shopping-cart-2"
              plain
              @click="handleAddInCart(itemInfo[0].itemId)"
            >
              加入购物车
            </el-button>
          </div>
          <div class="favorite-btn" v-if="!itemInfo[0].isFavorite">
            <el-button
              type="info"
              icon="el-icon-star-off"
              @click="changeItemIsFavorite(itemInfo[0].itemId)"
              >收藏</el-button
            >
          </div>
          <div class="favorite-btn" v-if="itemInfo[0].isFavorite">
            <el-button
              type="info"
              icon="el-icon-star-on"
              @click="changeItemIsFavorite(itemInfo[0].itemId)"
              >已收藏</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="product-detail">
      <!-- <img :src="itemInfo[0].itemDetailImgUrl[0].url" alt="" /> -->
      <el-tabs type="border-card">
        <el-tab-pane label="商品介绍">
          <div class="detail-img-box">
            <img
              v-for="(item, index) in itemInfo[0].itemDetailImgUrl"
              :key="index"
              :src="item.url"
              alt=""
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="规格与包装">
          <el-empty :image-size="200" description="暂无描述"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "ItemInfo",
  data() {
    return {
      itemInfo: {}, // 在created中通过id获取对应的item
      option1: "",
      option2: "",
      option3: "",
    };
  },
  created() {
    const id = this.$store.state.itemQueryId;
    this.itemInfo = this.$store.state.items.filter(function (n) {
      return n.itemId == id;
    });
    this.option1 = this.itemInfo[0].version[0];
    this.option2 = this.itemInfo[0].color[0];
    this.option3 = this.itemInfo[0].combo[0];
    document.title = this.itemInfo[0].title;
  },
  methods: {
    handleAddInCart(id) {
      this.$store.commit("handleAddInCart", id);
      this.$message({
        message: "成功加入购物车!",
        type: "success",
      });
    },
    changeItemIsFavorite(id) {
      this.$store.commit("changeItemIsFavorite", id);
    },
  },
  computed: {
    userAllSelection() {
      return (
        this.itemInfo[0].title +
        " " +
        this.option1 +
        " " +
        this.option2 +
        " " +
        this.option3
      );
    },
  },
};
</script>

<style scoped>
@import url("../../assets/css/item/ItemInfo.css");
</style>